<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="title flex-between flex-align-items-center">
        <div class="title-fl">编辑</div>
        <CloseOutlined class="title-fr" @click="close" />
      </div>
      <a-config-provider :locale="zhCN">
        <a-form @finish="submit" :model="form">
          <div class="form-main">
            <a-form-item label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }]">
              <a-input type="text" placeholder="请输入" v-model:value="form.email" maxlength="50" />
            </a-form-item>
            <a-form-item label="性别" name="gender" :rules="[{ required: true, message: '请选择性别' }]">
              <a-select placeholder="请选择" v-model:value="form.gender">
                <a-select-option v-for="item in genderList" :key="item.value" :value="item.value">{{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="分类" name="countryId" :rules="[{ required: true, message: '请选择分类' }]">
              <a-cascader v-model:value="form.cates" :options="cateList" placeholder="请选择" multiple />
            </a-form-item>
            <a-form-item label="国家" name="countryId" :rules="[{ required: true, message: '请选择国家' }]">
              <a-cascader v-model:value="form.countryIds" :options="countryList" placeholder="请选择" />
            </a-form-item>
            <a-form-item label="视频" name="videos" :rules="[{ required: true, message: '请上传视频' }]">
              <p class="upload-btn" @click="editFile('videos')">编辑</p>
            </a-form-item>
            <a-form-item label="图片" name="images" :rules="[{ required: true, message: '请上传图片' }]">
              <p class="upload-btn" @click="editFile('images')">编辑</p>
            </a-form-item>
          </div>
          <a-form-item class="form-btns">
            <div class="btns clear">
              <a-button type="primary" class="fr" html-type="submit" :loading="loading">确定</a-button>
              <a-button class="fr" @click="close">取消</a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-config-provider>
    </div>
  </div>

  <file-upload v-if="fileUploadInfo.show" :list="fileUploadInfo.list" @change="fileChange"
    @close="fileUploadInfo.show = false"></file-upload>
</template>
<script setup>
import FileUpload from './fileUpload.vue';
import { defineEmits, ref, defineProps, onMounted } from "vue";
import zhCN from "ant-design-vue/lib/locale/zh_CN";
import { message } from "ant-design-vue";
import api from '@/api/index.js';
import {
  CloseOutlined
} from "@ant-design/icons-vue";

const props = defineProps(['id']);
const emit = defineEmits(['close', 'change']);

const genderList = [
  {
    label: '男',
    value: 'male'
  },
  {
    label: '女',
    value: 'female'
  },
  {
    label: '未知',
    value: 'unknown'
  }
];

const loading = ref(false);
const fileUploadInfo = ref({});
const form = ref({});
const cateList = ref([]);
const countryList = ref([]);

const editFile = e => {
  fileUploadInfo.value = {
    field: e,
    list: form.value[e] ? form.value[e] : [],
    show: true
  }
}
const fileChange = e => {
  form.value[fileUploadInfo.value.field] = e;
  fileUploadInfo.value = {};
}
const queryInfluencerShow = () => {
  api.sensation.queryInfluencerShow({
    influencerId: props.id
  }).then(res => {
    form.value = {
      ...res,
      cates: [],
      countryIds: []
    };
    queryCateList();
    queryCountryList();
  });
}
const queryCateList = () => {
  api.base.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.label = item.name;
      item.value = item.id;
      item.children = item.categories.map(item1 => {
        item1.label = item1.name;
        item1.value = item1.id;
        if (form.value.category.some(cate => cate.category_id === item1.id)) {
          form.value.cates.push([item.id, item1.id]);
        }
        return item1;
      });
      return item;
    });
  });
}
const queryCountryList = () => {
  api.base.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.label = item.name;
      item.value = item.id;
      item.children = item.countries.map(item1 => {
        item1.label = item1.name;
        item1.value = item1.id;
        if (item1.id === form.value.countryId) {
          form.value.countryIds = [item.id, item1.id];
        }
        return item1;
      });
      return item;
    });
  });
}
const close = () => {
  emit("close");
};
// 提交
const submit = () => {
  loading.value = true;
  const category = [];
  form.value.cates.forEach(item => {
    for (let i = 0; i < cateList.value.length; i++) {
      if (item[0] === cateList.value[i].id) {
        for (let n = 0; n < cateList.value[i].children.length; n++) {
          if (!item[1]) {
            category.push({
              category_id: cateList.value[i].children[n].id,
              name: cateList.value[i].children[n].name
            });
          } else if (item[1] === cateList.value[i].children[n].id) {
            category.push({
              category_id: cateList.value[i].children[n].id,
              name: cateList.value[i].children[n].name
            });
            break;
          }
        }
        break;
      }
    }
  });
  api.sensation.updateInfluencer({
    influencerId: form.value.id,
    gender: form.value.gender,
    email: form.value.email,
    category: category,
    countryId: form.value.countryIds[1],
    videos: form.value.videos,
    images: form.value.images,
    status: form.value.status
  }).then(() => {
    loading.value = false;
    message.success('修改成功');
    emit("change");
  }).catch(err => {
    loading.value = false;
    message.error(err.msg);
  });
};
onMounted(() => {
  queryInfluencerShow();
});
</script>
<style lang="less" scoped>
.popup {
  .main {
    width: 508px;
    border-radius: 8px;
    background: #fff;

    .title {
      height: 56px;
      padding: 0 24px;
      border-bottom: 1px solid #f0f0f0;

      .title-fl {
        font-size: 16px;
        color: #262626;
        font-weight: bold;
      }

      .title-fr {
        color: #bfbfbf;
        cursor: pointer;
      }
    }

    .ant-form {
      .form-main {
        padding: 32px 35px 38px;
      }

      .ant-form-item:last-child {
        margin-bottom: 0;
      }

      .ant-form-item-label {
        width: 80px;
      }

      .ant-form-item-control-input,
      .ant-picker {
        width: 328px;
      }

      .upload-btn {
        cursor: pointer;
        color: #4096ff;
      }

      .form-btns {
        margin-bottom: 0;

        .btns {
          padding: 10px 24px;
          border-top: 1px solid #f0f0f0;

          .ant-btn {
            margin-left: 8px;
          }
        }

        .ant-form-item-control-input {
          width: 100%;
        }
      }
    }
  }
}
</style>
